<template>
  <fade-animation>
    <div class="layer" v-if="showLayer" @click.self.stop="handleLayerClick"></div>
  </fade-animation>
</template>

<script>
import FadeAnimation from '../animation/Fade'
  
export default{
  name: 'Masklayer',
  props: ["layerView"],
  data() {
    return {
      showLayer: false,
    }
  },
  watch: {
    layerView: function() {
      this.showLayer = this.layerView
    }
  },
  methods: {
    handleLayerClick() {
      this.showLayer = false
    }
  },
  components: {
    FadeAnimation,
  },
}
</script>

<style scoped>
.layer{ position: fixed; left: 0; top:0; right: 0; bottom: 0; background: rgba(0,0,0,.5); }
</style>
